<template>
  <div class="mapData">
    <div class="line-box">
      <div class="headers">
        <div class="title">订单统计</div>
        <div class="btns">
          <el-button plain round size="small" color="#16b777">按周</el-button>
          <el-button plain round size="small" color="#FFB800">按月</el-button>
          <el-button plain round size="small" color="#FF5722">按年</el-button>
        </div>
      </div>
      <div ref="lineRef" class="line"></div>
    </div>
    <div ref="pieRef" class="pie"></div>
    <div class="bar-box">
      <div class="headers">
        <div class="title">销售统计</div>
        <div class="btns">
          <el-button plain round size="small" color="#16b777">按周</el-button>
          <el-button plain round size="small" color="#FFB800">按月</el-button>
          <el-button plain round size="small" color="#FF5722">按年</el-button>
        </div>
      </div>
      <div ref="barRef" class="bar"></div>
    </div>
  </div>
</template>

<script setup name="mapData">
  import * as echarts from 'echarts';
  import { getOrderCountLineOption, getMediaTypeOption, getSaleCountBarOption } from '@/assets/js/homeMap'
  import { ref, reactive, toRefs, getCurrentInstance, onMounted } from 'vue'

  const lineRef = ref(null)
  const pieRef = ref(null)
  const barRef = ref(null)

  // 获取订单统计数据，并绘制线性图
  function getOrderCount() {
    let dataList = [
      { time: '2021-07-21', value: '210' },
      { time: '2021-07-22', value: '182' },
      { time: '2021-07-23', value: '191' },
      { time: '2021-07-24', value: '234' },
      { time: '2021-07-25', value: '290' },
      { time: '2021-07-26', value: '330' },
      { time: '2021-07-27', value: '220' },
      { time: '2021-07-21', value: '210' },
      { time: '2021-07-22', value: '182' },
      { time: '2021-07-23', value: '191' },
      { time: '2021-07-24', value: '234' },
      { time: '2021-07-25', value: '290' },
      { time: '2021-07-26', value: '330' },
      { time: '2021-07-27', value: '220' }
    ]
    let xAxisData = []
    let seriesData = []
    dataList.forEach(item => {
      xAxisData.push(item.time)
      seriesData.push(item.value)
    })
    let option = getOrderCountLineOption(xAxisData, seriesData)
    let lineMap = echarts.init(lineRef.value)
    lineMap.setOption(option)
  }

  function doDrawMediaType() {
    let dataList = [
      {name: '网站', value: '586'},
      {name: '微信', value: '283'},
      {name: '微博', value: '658'},
      {name: 'APP', value: '373'},
      {name: '论坛', value: '292'},
      {name: '数字报', value: '260'}
    ]
    let colorList = [
      {c1: '#1DAEFF', c2: '#6CF3EF'},
      {c1: '#2EFF42', c2: '#91FD9B'},
      {c1: '#F29601', c2: '#FEE32E'},
      {c1: '#E50112', c2: '#E95213'},
      {c1: '#B96301', c2: '#F8A648'},
      {c1: '#A2FFEC', c2: '#8EFDE5'}
    ]
    let seriesData = []
    dataList.forEach((item, index) => {
      seriesData.push({
        name: item.name,
        value: item.value,
        itemStyle: {
          color: {
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            type: 'linear',
            global: false,
            colorStops: [
              { offset: 0, color: colorList[index].c1 },
              { offset: 1, color:colorList[index].c2 }
            ]
          }
        }
      })
    })
    let option = getMediaTypeOption(seriesData)
    let pieMap= echarts.init(pieRef.value)
    pieMap.setOption(option)
  }

  // 获取销售统计数据，并绘制柱状图
  function getSaleCount() {
    let dataList = [
      {name: '2021-07-21', value: '210'},
      {name: '2021-07-22', value: '200'},
      {name: '2021-07-23', value: '191'},
      {name: '2021-07-24', value: '290'},
      {name: '2021-07-25', value: '220'},
      {name: '2021-07-26', value: '330'},
      {name: '2021-07-27', value: '182'}
    ]
    let option = getSaleCountBarOption(dataList)
    let barMap = echarts.init(barRef.value)
    barMap.setOption(option)
  }

  onMounted(() => {
    getOrderCount()
    doDrawMediaType()
    getSaleCount()
  })

</script>

<style lang="less" scoped>
.mapData{
  width: calc(100% - 1.6%);
  padding: 0 0.8% 0.8%;
  display: flex;
  flex-wrap: wrap;
  >div{
    position: relative;
    width: calc(32.8% - 20px);
    padding: 10px 10px;
    height: 460px;
    border-radius: 10px;
    background: #ffffff;
    &:not(:nth-child(3n)) {
      margin-right: 0.8%;
    }
    .headers{
      height: 25px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .title{
        font-weight: bold;
        font-size: 20px;
        color: #464646;
      }
    }
    >.line, .bar{
      width: 100%;
      height: 420px;
    }
    >.btns{
      position: absolute;
      top: 0;
      right: 0;
      z-index: 1000;
    }
  }
}
</style>